<template>
	<!-- 信息补全页面 -->
	<view class="container">
		<topBar>信息补全</topBar>
		<view class="content">
			<view class="cart-info">
				<view class="cart-info-content">
					<view class="cart-types">
						<Button2 class="btn" v-if="info.energyType">{{info.energyType}}</Button2>
						<Button2 class="btn" v-if="info.directory">{{info.directory}}</Button2>
					</view>
					<view class="cart-code">
						<view class="code-item">
							<input type="text" disabled v-model="nowCartCode[0]" />
						</view>
						<view class="code-item">
							<input type="text" disabled v-model="nowCartCode[1]" />
						</view>
						<view class="code-separator">
							·
						</view>
						<block v-for="(item,index) in nowCartCode" :key="index">
							<view class="code-item" v-if="index > 1">
								<input type="text" disabled v-model="nowCartCode[index]" />
							</view>

						</block>

					</view>
					<view class="cart-type">
						新能源
					</view>
				</view>
			</view>

			<view class="cart-lines">
				<view class="line">
					<view class="title">
						<!-- <image src="/static/img/common/required.png" class="required-icon"></image> -->
						运企名称
					</view>
					<view class="val">
						{{info.transportCompanyName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						<!-- <image src="/static/img/common/required.png" class="required-icon"></image> -->
						驾驶员
					</view>
					<view class="val">
						{{info.receiveName}}
					</view>
				</view>
				<view class="line" @click="showStartProjectPopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>起点名称</text>
					</view>
					<view class="val" :class="formData.startingPlace == '' &&'no-check'">
						<text>{{formData.startingPlace || '请选择' }}</text>
						<uni-icons type="right" size="28"
							:color="formData.startingPlace == '' ? '#989DA5' : '#0E1624'"></uni-icons>
					</view>
				</view>
				<view class="line" @click="showMaterialTypePopup">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>物料类型</text>
					</view>
					<view class="val" :class="formData.rockTypeName=='' &&'no-check'">
						<text>{{formData.rockTypeName || '请选择'}}</text>
						<uni-icons type="right" size="28"
							:color="formData.rockTypeName==''?'#989DA5':'#0E1624'"></uni-icons>
					</view>
				</view>



			</view>
		</view>
		<BottomBtn @click.once="saveReceiving">提交确认</BottomBtn>
		<!-- 起点名称弹窗 -->
		<StartProjectPopup :addressList='addressList' v-if="isShowStartProjectPopup"
			@saveStartProject="saveStartProject" />

		<!-- 物料类型弹窗 -->
		<MaterialTypePopup :typeList='muckTypeList' v-if="isShowMaterialTypePopup"
			@saveMaterialType="saveMaterialType" />
		<!-- 消息提示 -->
		<messageTip ref="myMessage"></messageTip>
	</view>

</template>

<script setup lang="ts">
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button2 from '@/components/button2/button2.vue';
	import StartProjectPopup from '@/components/consumption/startProjectPopup/startProjectPopup.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue';
	import { computed, reactive, ref } from 'vue';
	import { useConsumptionStore } from '@/stroes';
	import * as consumptionApi from '@/api/consumption/consumption.js';
	import * as dischargingApi from '@/api/consumption/discharging.js';
	// 消息提示
	const myMessage = ref()
	const consumptionStore = useConsumptionStore()
	const info = consumptionStore.info
	const formData = reactive({
		"orderId": info.orderId,
		"startingId": null,
		"startingPlace": '',
		"rockTypeId": null,
		"rockTypeName": ''

	})
	// 车牌号
	const nowCartCode = computed(() => {
		return info.carNumber.split('')
	})
	// 当前起点名称
	const nowStartProject = ref(null)
	// 当前终点名称列表
	const addressList = ref([])
	// 是否显示终点项目弹窗
	const isShowStartProjectPopup = ref(false)
	// 打开选择终点项目弹窗
	const showStartProjectPopup = () => {
		dischargingApi.queryProjectInfoList().then(res => {
			if (res.data.code == 0) {
				addressList.value = res.data.data;
				isShowStartProjectPopup.value = true
			}
		})
	}
	// 保存终点项目
	const saveStartProject = (item) => {
		if (item) {

			formData.startingId = item.projectId
			formData.startingPlace = item.projectName
		}

		isShowStartProjectPopup.value = false
	}
	// 当前物料类型列表
	const muckTypeList = ref([])
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		consumptionApi.muckTypeAll().then(res => {
			console.log(res, '888888888');
			if (res.data.code == 0) {
				muckTypeList.value = res.data.data
			} else {
				console.log("失败")
			}
			isShowMaterialTypePopup.value = true
		})
	}
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {

			formData.rockTypeId = item.id
			formData.rockTypeName = item.name
		}
		isShowMaterialTypePopup.value = false
	}

	// 保存新增收料
	const saveReceiving = () => {
		consumptionApi.saveInformation(formData).then(res => {
			if (res.data.code == 0) {
				myMessage.value.open('success', '信息补全成功')
			} else {
				myMessage.value.open('error', '信息补全失败,请稍后重试')
			}
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
		// uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.content {
		margin: 32rpx;
		width: 686rpx;
		// height: 1140rpx;
		padding-bottom: 42rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;



		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0rpx;
				font-size: 40rpx;
				font-weight: bold;

				.code-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 80rpx;
					// line-height: 80rpx;
					text-align: center;
					background: #EFF6FE;
					border-radius: 8rpx;


				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;



				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
						font-size: 28rpx;
					}

					.reason-input {
						width: 120rpx;
					}

					&.deduction-amount {
						color: #EB4F51;
					}

					&.no-check {
						color: #989DA5;
					}

					&.btns {
						font-weight: normal;
					}


				}

			}


		}

		.btn {
			margin-left: 8rpx;
			border-radius: 4rpx;

			&.no-active-btn {
				color: $info-color;
				background: rgba(46, 135, 255, 0.1);
			}
		}

	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;
		padding: 16rpx 32rpx 66rpx;
		background-color: #fff;
		box-sizing: border-box;

		.btn {
			padding: 22rpx 0rpx;
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: center;
			color: #fff;
			border-radius: 48rpx;
			border: 2rpx solid $primary-color;

			&.danger {
				margin-right: 12rpx;
				width: 226rpx;
				color: $danger-color;
				border-color: $danger-color;
			}

			&.primary {
				flex: 1;
				background-color: $primary-color;
			}
		}
	}
</style>